<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
		</demo-desc>
		<fu-section title="九宫格" customClass="fu-m-t-20" type="line">
			<fu-grid>
				<fu-grid-item v-for="(item,index) in 3" :key="index">
					<view class="fu-flex fu-flex-direction-column fu-flex-column-center fu-flex-row-center fu-flex-1">
						<fu-icons name="image" :size="30" color="#777" />
						<text class="text">Grid</text>
					</view>
				</fu-grid-item>
			</fu-grid>
		</fu-section>
		
		<fu-section title="自定义列数" customClass="fu-m-t-20" type="line">
			<fu-grid :column="4" :highlight="true" @change="change">
				<fu-grid-item v-for="(item, index) in 8" :index="index" :key="index">
					<view class="fu-flex fu-flex-direction-column fu-flex-column-center fu-flex-row-center fu-flex-1" style="background-color: #fff;">
						<fu-icons name="image" :size="30" color="#777" />
						<text class="text">Grid</text>
					</view>
				</fu-grid-item>
			</fu-grid>
		</fu-section>
		
		<fu-section title="滑动视图" customClass="fu-m-t-20" type="line">
			<swiper class="swiper" :indicator-dots="true">
				<swiper-item>
					<fu-grid :column="3" :highlight="true" @change="change">
						<fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<fu-icons name="image" :size="30" color="#777" />
								<text class="text">{{ item.text }}</text>
							</view>
						</fu-grid-item>
					</fu-grid>
				</swiper-item>
				<swiper-item>
					<fu-grid :column="3" :highlight="true" @change="change">
						<fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<fu-icons name="image" :size="30" color="#777" />
								<text class="text">{{ item.text }}</text>
							</view>
						</fu-grid-item>
					</fu-grid>
				</swiper-item>
				<swiper-item>
					<fu-grid :column="3" :highlight="true" @change="change">
						<fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<fu-icons name="image" :size="30" color="#777" />
								<text class="text">{{ item.text }}</text>
							</view>
						</fu-grid-item>
					</fu-grid>
				</swiper-item>
			</swiper>
		</fu-section>
		
		<fu-section title="无边框带角标（3列）" customClass="fu-m-t-20" type="line">
			<fu-grid :column="3" :showBorder="false" :square="false" @change="change">
				<fu-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<fu-icons name="image" :size="30" color="#777" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<fu-badge :value="item.badge" :type="item.type" />
						</view>
					</view>
				</fu-grid-item>
			</fu-grid>
		</fu-section>
		
		<fu-section title="矩形宫格（3列）" customClass="fu-m-t-20" type="line">
			<fu-grid :column="3" :square="false" :highlight="false" @change="change">
				<fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<fu-icons name="image" :size="30" color="#777" />
						<text class="text">{{ item.text }}</text>
					</view>
				</fu-grid-item>
			</fu-grid>
		</fu-section>
		
		<fu-section title="边框颜色（4列 无文字）" customClass="fu-m-t-20" type="line">
			<fu-grid :column="4" borderColor="#03a9f4">
				<fu-grid-item v-for="(item,index) in 4" :key="index">
					<view class="grid-item-box">
						<fu-icons name="image" :size="30" color="#777" />
					</view>
				</fu-grid-item>
			</fu-grid>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	
	// data数据
	const list = reactive([
		{ text: 'Grid 1', badge: '0', type: "primary" },
		{ text: 'Grid 2', badge: '1', type: "success" },
		{ text: 'Grid 3', badge: '99', type: "warning" },
		{ text: 'Grid 4', badge: '2', type: "error" },
		{ text: 'Grid 5' },
		{ text: 'Grid 6' },
		{ text: 'Grid 7' },
		{ text: 'Grid 8' },
		{ text: 'Grid 9' }
	]);
	
	// methods方法
	const change = (e) => {
		let { index } = e.detail;
		list[index].badge && list[index].badge++

		uni.showToast({
			title: `点击第${index+1}个宫格`,
			icon: 'none'
		})
	};
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
	
	.swiper {
		height: 390px;
	}
		
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
	
	.text {
		font-size: 12px;
		margin-top: 10px;
	}
</style>